<template>
	<view class="content">
		<view class="tab-container">
			<view class="tab-headers">
				<view class="tab-header" :class="{ active: currentIndex === 1 }" @click="changeTab(1)">已关注({{ listData.followCount }})</view>
				<view class="tab-header" :class="{ active: currentIndex === 0 }" @click="changeTab(0)">已取关({{ listData.unFollowCount }})</view>
			</view>
			<div style="display: flex; align-items: center; padding: 10rpx">
				<uni-search-bar
					placeholder="搜索用户关键字"
					@confirm="search"
					v-model="subUserName"
					@input="input"
					:cancelButton="false"
					:radius="100"
					style="flex: 2"
				></uni-search-bar>

				<uni-data-select v-if="currentIndex === 1" v-model="sortType" :localdata="range" style="flex: 1; margin-right: 20rpx" :clear="false"></uni-data-select>
			</div>
		</view>

		<div class="user-container">
			<!-- 数据列表 -->
			<scroll-view scroll-y class="list-container" :scroll-top="scrollTop" @scrolltolower="loadMore">
				<div class="user-item" v-for="(user, index) in users" :key="index" @click="handleToUrl(`/mineComponentPackage/component/friend/detail?subUserId=${user.subUserId}`)">
					<div class="user-info">
						<div>
							<image :src="user.subUserAvatar" alt="" class="userImg" />
						</div>
						<div style="margin-left: 40rpx; flex: 3">
							<div style="display: flex; justify-content: space-between">
								<div style="display: flex">
									<div class="user-name">{{ user.subUserName || '' }}</div>
									<div class="user-phone">
										<span>(</span>
										<text>{{ user.subUserPhone || '' }}</text>
										<span>)</span>
									</div>
								</div>
							</div>
							<div class="order-time" v-if="currentIndex === 1">
								<span>最近下单时间:</span>
								<text>{{ user.lastTimeStr || '' }}</text>
							</div>
							<div class="order-time" v-else>
								<span>取关原因:</span>
								{{ user.expirationReason || '' }}
							</div>
						</div>
						<uni-icons type="right" size="16" style="float: right; color: #6d6d6d"></uni-icons>
					</div>

					<div class="line"></div>
					<div class="order-amount">
						<view class="list">
							待结算订单金额: ¥
							{{ user.pendingSettlementPrice || 0 }}
						</view>
						<view>
							已结算订单金额: ¥
							{{ user.alreadySettlementPrice  || 0}}
						</view>
					</div>
				</div>
				<view class="loading-status">
					<template v-if="loading">
						<uni-load-more status="loading"></uni-load-more>
					</template>
					<template v-else-if="noMoreData">
						<text class="no-more">没有更多数据了</text>
					</template>
				</view>
			</scroll-view>
		</div>
	</view>
</template>

<script>
export default {
	data() {
		return {
			page: 1, // 当前页码
			pageSize: 5, // 每页条数
			loading: false, // 加载状态
			noMoreData: false, // 是否无更多数据
			scrollTop: 0, // 滚动位置
			currentIndex: 1, // 当前选中的选项卡索引，初始为0即选中第一个
			radio: 0,
			total: 0,
			sex: [
				{
					text: '全部',
					value: 0
				},
				{
					text: '分红',
					value: 1
				},
				{
					text: '佣金',
					value: 2
				}
			],
			sex2: [
				{
					text: '全部',
					value: 0
				},
				{
					text: '审批中',
					value: 1
				},
				{
					text: '成功',
					value: 2
				},
				{
					text: '失败',
					value: 3
				}
			],
			sortType: 1,
			subUserName: '',
			listData: {
				unFollowCount: '',
				followCount: ''
			},
			range: [
				{
					value: 1,
					text: '按关注时间排序'
				}
				// {
				// 	value: 1,
				// 	text: '2025-01-13'
				// },
				// {
				// 	value: 2,
				// 	text: '2025-01-14'
				// }
			],

			users: []
		};
	},
	onLoad() {
		this.initData();
	},
	methods: {
		input() {
			uni.showLoading({
				title: '加载中'
			});
			this.page = 1;
			this.users = [];
			this.fetchData();
		},
		// 初始化数据
		async initData() {
			try {
				this.loading = true;
				this.fetchData();
			} finally {
				this.loading = false;
			}
		},

		// 加载更多
		async loadMore() {
			if (this.loading || this.noMoreData) return;

			try {
				this.loading = true;
				this.page = this.page + 1
				this.fetchData();
			} catch (e) {
			} finally {
				this.loading = false;
			}
		},

		// 请求数据（需替换为真实API）
		async fetchData() {
			const data = {
				page: this.page,
				pageSize: 5,
				sortType: this.sortType,
				status: this.currentIndex,
				subUserName: this.subUserName
			};
			this.$post('/yahe/promotion/lotus/friend', data, '1').then((res) => {
				if (res.success) {
					this.users = this.users.concat(res.content?.lotusFriends?.records || []) || [];
					this.page = res.content?.lotusFriends?.current;
					this.total = res.content?.lotusFriends?.total;
					this.listData = {
						followCount: res.content?.followCount,
						unFollowCount: res.content?.unFollowCount
					};
					this.checkNoMoreData(res);
				} else {
					this.$toast(res.message, 'none');
				}
			});
		},

		// 判断是否无更多数据
		checkNoMoreData(res) {
			const totalPages = Math.ceil(res.content?.lotusFriends?.total / this.pageSize);
			this.noMoreData = this.page >= totalPages;
		},
		changeTab(index) {
			this.currentIndex = index;
			this.page = 1;
			this.users = [];
			uni.showLoading({
				title: '加载中'
			});
			this.fetchData();
		},
		handleToUrl(url) {
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style scoped lang="less">
.content {
	box-sizing: border-box;
	height: 100%;
	background-color: #f5f5f5;
	.tab-container {
		background-color: white;
		.tab-headers {
			display: flex;
			justify-content: space-around;
			margin-bottom: 20rpx;

			.tab-header {
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 500;
				font-size: 32rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				padding: 20rpx;
				cursor: pointer;
			}
			.active {
				color: #0a978e;
				border-bottom: 6rpx solid #0a978e;
			}
		}
	}
	.tab-content {
		line-height: 1.6;
	}
}

::v-deep .checklist-group .checklist-box.is--tag.is-checked {
	border-color: transparent !important;
	background: linear-gradient(90deg, #29d8c6 0%, #10beaf 100%) !important;
	border-radius: 8rpx 8rpx 8rpx 8rpx !important;
	color: #fff;
	padding: 20rpx 40rpx;
}

::v-deep .uni-data-checklist .checklist-group .checklist-box.is--tag {
	border-color: transparent !important;
	border-radius: 8rpx 8rpx 8rpx 8rpx !important;
	color: #6d6d6d;
	padding: 10rpx;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #6d6d6d;
	line-height: 28rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}

.record-list-container {
	padding: 30rpx 20rpx;
}

.record-item {
	border-radius: 10rpx;
	padding: 20rpx 0rpx;
	margin-bottom: 10rpx;
}

.record-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.record-header-text {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 600;
	font-size: 28rpx;
	color: #3a3a3a;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.amount {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #ff6737;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.amount2 {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #3a3a3a;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.record-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 24rpx;
	color: #666;
}

.status {
	color: #999;
}

.statusLose {
	color: #f02506;
}

.line {
	width: 100%;
	margin: 24rpx auto;
	border-bottom: 1rpx solid #efefef;
}

.user-container {
	font-family: Arial, sans-serif;
	margin: 10rpx;
	background-color: #f5f5f5;
	padding: 20rpx;
	height: 76%;
}

.user-item {
	border: 4rpx solid #f5f5f5;
	border-radius: 16rpx;
	padding: 16rpx 24rpx;
	margin-bottom: 30rpx;
	background-color: #ffffff;
}

.user-info {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-size: 28rpx;
	color: #3a3a3a;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.user-name {
	font-size: 28rpx;
	margin-right: 20rpx;
}

.user-phone {
	color: #3a3a3a;
}

.order-time {
	color: #888;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 500;
	font-size: 24rpx;
	color: #6d6d6d;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.order-amount {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 500;
	font-size: 24rpx;
	color: #6d6d6d;
	text-align: left;
	font-style: normal;
	text-transform: none;
	margin-left: 120rpx;
	.list {
		margin-bottom: 20rpx;
	}
}

.order-amount span {
	display: block;
	margin-bottom: 10rpx;
}

.userImg {
	width: 80rpx;
	height: 80rpx;
	background: #d9d9d9;
	border-radius: 80rpx;
}

.loading-status {
	padding: 20rpx;
	text-align: center;
}

.no-more {
	color: #999;
	font-size: 24rpx;
}
.list-container {
	height: 100%;
}
</style>
